<template>
	<view class="con-result-wraper">
		<u-navbar title="领取成功" :placeholder="true" :safeAreaInsetTop="true">
			<view class="u-nav-slot" slot="left" style="background-color: #eee"></view>
		</u-navbar>
		<view class="info">
			<image style="width: 200rpx; height: 200rpx" src="../../static/img/success.png"></image>
			<view class="info-result">
				<text v-if="resultInfo.isNotGoods===1">核销成功</text>
				<text v-else>优惠券核销成功</text>
			</view>
			<view class="info-type">
				<!--isNotGoods 核销商品券的时候，不需要展示券的金额  -->
				<view class="title" v-if="!resultInfo.isNotGoods|| resultInfo.isNotGoods===0">
					<text v-if=" resultInfo.couponType == '2'"> {{ resultInfo.amt }}%优惠券</text>
					<text v-if=" resultInfo.couponType == '1'"> {{ resultInfo.amt }}元优惠券</text>
				</view>
				<view>
					<text style="font-size: 12px">核销时间：{{ resultInfo.writeOffTime }}</text>
				</view>
			</view>
			<!-- 		<view class="info-details">
				<view class="details-item">
					<view class="title">油品：</view>
					<view>{{ resultInfo.oils }}</view>
				</view>
				<view class="details-item">
					<view class="title">适用：</view>
					<view>{{ resultInfo.couponStaNames }}</view>
				</view>
				<view class="details-item">
					<view class="title">截止：</view>
					<view>{{ resultInfo.couponEffectiveTime }}</view>
				</view>
				<view class="details-item">
					<view class="title">来源：</view>
					<view>{{ resultInfo.couponRemark }}</view>
				</view>
			</view> -->
			<view class="operate">
				<view class="operate-container">
					<u-button @click="goBack" size="large" color="#35b227">返回</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultInfo: {},
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
		},
		onLoad(options) {
			console.log("核销成功页面参数--load:", options);
			this.resultInfo = uni.getStorageSync("couponInfo") ? uni.getStorageSync("couponInfo") : {};
		},
		mounted() {
			this.resultInfo = uni.getStorageSync("couponInfo") ? uni.getStorageSync("couponInfo") : {};
		},
	};
</script>

<style lang="scss">
	.con-result-wraper {
		height: 100vh;
		// background-color: #f5f5f9;
		position: relative;

		.info {
			margin-top: 180upx;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.info-result {
				font-size: 24px;
				margin: 40upx 0;
			}

			.info-type {
				margin-bottom: 150upx;
				margin-top: 200upx;

				.title {
					font-size: 24px;
					font-weight: 400;
					margin-bottom: 14px;
				}

				view {
					text-align: center;
				}
			}

			/* 		.info-details {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: 40upx;
			width: 300px;

			.details-item {
				margin-bottom: 10px;
				font-size: 18px;
				display: flex;
				.title {
					flex: 1;
					font-weight: normal;
				}
				view {
					flex: 4;
					font-weight: 600;
				}
			}
		} */
		}

		.back-btn {
			position: absolute;
			bottom: 50upx;
		}

		.operate {
			// position: absolute;
			bottom: 120upx;
			width: 100vw;
			display: flex;
			justify-content: center;

			.operate-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 0 20upx;
				width: 500upx;
				height: 80rpx;
				font-size: 14px;
			}
		}
	}
</style>